$(function () {
  // console.log('hello world!');
  let $url = $('input[type = "text"]'),
    $btnSave = $('input[type="button"]'),
    $img = $('img'),
    $tmpImg = $('<img>');

  loadImage();

  $btnSave.click(() => {
    $tmpImg.attr('crossOrigin', 'anonymous');
    $tmpImg.attr('src', $url.val());
  })

  $tmpImg.load(function () {
    let can = $('<canvas>').get(0);
    let ctx = can.getContext('2d');

    ctx.width = this.width;
    ctx.height = this.height;

    ctx.drawImage(this, 0, 0, can.width, can.height);

    localStorage.getItem('img', can.toDataURL());
  });
  function loadImage() {
    let strImg = localStorage.getItem('img');
    if (strImg) {
      $img.attr('src', strImg);
      $img.css({ display: 'block' });
    } else {
      strImg = ''
      $img.css({ display: 'none' });
    }
  }
});
